"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/3
 */
import * as React from 'react'
import {SCREEN_WIDTH} from "../constant";
import {autoSize, commonStyles} from "../assets/styles/common";
import Avatar from "./Avatar";
import {groupStyles} from "../assets/styles/groups";
import MyText from "./MyText";
import {Actions} from "react-native-router-flux";

const {View, StyleSheet,TouchableOpacity} = require('react-native');
const {connect} = require('react-redux');


const avatarProps = {
    size:autoSize(85),
    borderColor:'#fff',
    borderWidth:8,
};
class NoGroups extends React.Component<any, any> {

    render() {
        return (
            <View style={[commonStyles.centerVH,styles.container]}>
                <View style={[commonStyles.flexRow,{justifyContent:'center'}]}>
                    <Avatar {...avatarProps} source={require('../assets/image/avatar_fives.png')} style={{zIndex:10,backgroundColor:'#fff'}} />
                    <Avatar {...avatarProps} style={{zIndex:8 ,marginLeft:autoSize(-60)}} />
                    <Avatar {...avatarProps} style={{zIndex:6,marginLeft:autoSize(-60)}} />
                    <Avatar {...avatarProps} style={{zIndex:4,marginLeft:autoSize(-60)}} />
                    <Avatar {...avatarProps} style={{zIndex:0,marginLeft:autoSize(-60)}} />
                </View>
                <View style={{padding:30}}>
                    <MyText fontSize={20} fontWeight='500' style={{textAlign:'center'}}>
                        不要成为那个人，与大家交流并加入群组！
                    </MyText>
                </View>

                <View style={styles.btnContainer}>
                    <TouchableOpacity style={[commonStyles.centerVH,styles.btn]} onPress={Actions.allGroups}>
                        <MyText color={'#fff'} fontSize={14}>查找群组</MyText>
                    </TouchableOpacity>
                </View>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor:'#fff',
        width:SCREEN_WIDTH,
        height:autoSize(304)
    },
    btnContainer:{
        display:'flex',
        justifyContent:'center',
    },
    btn:{
        backgroundColor:'#DAC229',
        width:autoSize(114),
        height:autoSize(45),
    }
});
export default NoGroups;